<template>
  <section class="hot">
    <div class="data-table">
      <table>
        <thead>
        <tr>
          <th width="15%">品名</th>
          <th width="10%">材质</th>
          <th width="15%">规格</th>
          <th width="10%">钢厂</th>
          <th width="12%">存放地</th>
          <th width="12%">重量</th>
          <th width="12%">价格</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="item in goods">
          <td class="text-overflow" :title="item.goodsCate2Name">{{ item.goodsCate2Name }}</td>
          <td class="text-overflow" :title="item.goodsAttr.steelQuality">{{ item.goodsAttr.steelQuality }}</td>
          <td class="text-overflow" :title="item.goodsAttr.spec">{{ item.goodsAttr.spec }}</td>
          <td class="text-overflow" :title="item.goodsAttr.manufactor">{{ item.goodsAttr.manufactor }}</td>
          <td class="text-overflow" :title="item.goodsAttr.storagePlace">{{ item.goodsAttr.storagePlace }}</td>
          <td class="text-overflow">{{ item.totalStock }}{{ item.measure }}</td>

          <td class="text-primay text-overflow"
              :title="`${item.isPhonePrice == 1 || item.minPrice == '-4008600550'?  '电议' :  '￥'+item.minPrice}`">
            {{ item.isPhonePrice == 1 || item.minPrice == '-4008600550'?  '电议' :  '￥'+item.minPrice }}
          </td>

          <td>
            <a :href="`${item.shopDomain}/kcDetails/${item.goodsId}`" target="_blank" class="buy">立即采购</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <ul class="business-list">
      <li v-for="item in shoper" :key="item.adId">
        <a v-if="item.path" :href="item.path" target="_blank" :title="item.name">
          <img v-lazyload.cdn="item.picturePath" :alt="item.decorateName">
        </a>

        <a v-else>
          <img v-lazyload.cdn="item.picturePath" :alt="item.decorateName" :title="item.name">
        </a>
      </li>
    </ul>
  </section>
</template>

<script>
  export default {
    props: {
      shoper: {
        type: Array,
        'default' () {
          return []
        }
      },

      goods: {
        type: Array,
        'default' () {
          return []
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .hot {
    padding: 10px 0;
    overflow: hidden;
  }

  .data-table {
    float: left;
    width: 930px;
    margin-left: 10px;

    table {
      width: 100%;
      text-align: center;
      table-layout: fixed;
    }

    th {
      background-color: #f2f2f2;
      height: 40px;
      font-weight: normal;
    }

    td {
      height: 60px;
      padding: 0 6px;
      border-bottom: 1px solid #dedede;
    }
    tr:hover {
      td {
        background-color: #fff6f5;
      }
    }
    tr:last-child {
      td {
        border: none;
      }
    }
    .buy {
      font-size: 14px;
      height: 30px;
      width: 86px;
      border: 1px solid $--color-primary;
      color: $--color-primary;
      background-color: #fff;
      display: inline-block;
      border-radius: 2px;
      padding: 5px 8px;
      text-align: center;

      &:hover {
        background-color: rgba($--color-primary, .8);
        color: #fff;
      }
    }
  }

  .business-list {
    margin-left: 20px;
    float: left;
    width: 200px;

    li{
      height: 100px;
      border: 1px solid #dedede;
    }

    a {
      text-align: center;
      display: block;
      overflow: hidden;

      &:hover {
        box-shadow: 0 2px 4px 0 #dedede;
      }
    }

    li + li {
      margin-top: 8px;
    }

    img {
      max-width: 200px;
      max-height: 98px;
      vertical-align: middle;
    }

  }
</style>
